<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>示例</title>
    <style>
      #editor {
        border: 1px solid #ccc;
        padding: 10px;
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="editor" contenteditable="true"></div>

    <script>
      const jsonContent = {
        type: "document",
        children: [
          {
            type: "paragraph",
            content: "Hello World!",
          },
          {
            type: "code",
            children: [
              {
                type: "text",
                content: "console.log('Hello, world!');",
              },
            ],
          },
        ],
      };

      jsonContent.children.map((node, index)=>{
        switch(node.type){
          case "paragraph":
            const p = document.createElement("p");
            p.textContent = node.content;
            document.getElementById("editor").appendChild(p);
            break;
          case "code":
            const code = document.createElement("code");
            node.children.forEach((textNode) => {
              const text = document.createTextNode(textNode.content);
              code.appendChild(text);
            });
            document.getElementById("editor").appendChild(code);
            break;
          default:
            console.warn(`Unsupported node type: ${node.type}`);
            break;
        }
      })
    </script>
  </body>
</html>
